<template>
  <div>

    <div class="row" >
        <div class="col-md-6">
          <div class="portlet box grey-cascade">
            <div class="portlet-title">
            <div class="caption">
              <i class="fa fa-globe"></i> 设备实时运行参数
            </div>

            </div>
            <div class="portlet-body">
              <div class="row">
                <div class="col-md-3 col-xs-6 col-sm-6 c333" v-for="(item,index) in list">
                  {{item.dev_para_name}}
                  <img src="../../../../static/images/icon1.png" alt="">
                  {{item.display_val}}
                </div>
                
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-2">
          <div class="portlet box grey-cascade">
            <div class="portlet-title">
            <div class="caption">
              <i class="fa fa-globe"></i> 监控及台账
            </div>

            </div>
            <div class="portlet-body">
              <div class="row" style="text-align: center;">
                <div class="c333" data-toggle="modal"  href="#jkInfor">
                  监控
                </div>
                <div class="c333" data-toggle="modal"  href="#sbRecord">
                  设备台账记录
                </div>
              </div>
            </div>
          </div>
        </div>

         <div class="col-md-4">
          <div class="portlet box grey-cascade">
            <div class="portlet-title">
            <div class="caption">
              <i class="fa fa-globe"></i> {{this.title}}环境实时参数
            </div>

            </div>
            <div class="portlet-body">
              <div class="row">
                <div class="col-md-6 col-xs-6 c333" v-for="(item,index) in glList">
                  <img src="../../../../static/images/icon1.png" alt=""> 
                  {{item.dev_para_name}} <span class="color">{{item.display_val}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>  


      <div class="row"> 
        <div class="col-md-12">
          <!-- BEGIN EXAMPLE TABLE PORTLET-->
          <div class="portlet box grey-cascade">
            <div class="portlet-title">
              <div class="caption">
                <i class="fa fa-globe"></i>发电机房数据
              </div>
              <div class="cz">
                <div class="btn-group pull-right ">
                    <button class="btn dropdown-toggle" data-toggle="dropdown">工具 <i class="fa fa-angle-down"></i>
                    </button>
                    <ul class="dropdown-menu pull-right style">
                      <li>
                        <a href="javascript:;">
                        打印 </a>
                      </li>
                      <li>
                        <a href="javascript:;">
                        另存为PDF </a>
                      </li>
                      <li>
                        <a href="javascript:;">
                        导出为Excel </a>
                      </li>
                    </ul>
                  </div>
            
              </div>

            </div>
            <div class="portlet-body">
              <div class="row mb10" style="margin: 0 0 20px 0">
                <!-- <div class="col-md-2">
                  <select class="bs-select form-control" style="margin-right: 25px;">
                    <option>全部</option>
                    <option>1号水泵</option>
                    <option>2号水泵</option>
                  </select>
                </div>

                <div class="col-md-3">
                  <select class="bs-select form-control" style="margin-right: 25px;">
                    <option selected="" value="全部">全部</option>
                    <option value="设备维保计划数量">设备维保计划数量</option>
                    <option value="设备维保计划完成数量">设备维保计划完成数量</option>
                    <option value="设备故障率">设备故障率</option>
                    <option value="设备正常运行时长">设备正常运行时长</option>
                  </select>
                </div> -->
                
                <!-- <label class="control-label style" style="float: left;position: relative;top: 5px; color: #333;font-weight: 500;">起止日期 :</label> -->
                  <div class="col-md-5" style="padding: 0;">
                    <div class="col-md-2" style="color: #333;font-weight: 500;line-height: 34px;">开始时间 :</div>
                    <div class="col-md-10">
                        <div class="input-group date form_datetime" data-date="2012-12-21T15:25:00Z">
                        <input type="text" size="16" readonly class="form-control">
                        <span class="input-group-btn ">
                          <button style="color: #333;font-weight: 500;" class="btn default date-reset" type="button"><i class="fa fa-times"></i></button>
                          <button style="color: #333;font-weight: 500;" class="btn default date-set" type="button"><i class="fa fa-calendar"></i></button>
                        </span>
                      </div>
                    </div>
                    
                  </div>
                 
                  <div class="col-md-5" style="padding: 0;">
                    <div class="col-md-2" style="color: #333;font-weight: 500;line-height: 34px;">结束时间 :</div>
                    <div class="col-md-10">
                        <div class="input-group date form_datetime" data-date="2012-12-21T15:25:00Z">
                        <input type="text" size="16" readonly class="form-control">
                        <span class="input-group-btn ">
                          <button  style="color: #333;font-weight: 500;" class="btn default date-reset" type="button"><i class="fa fa-times"></i></button>
                          <button  style="color: #333;font-weight: 500;" class="btn default date-set" type="button"><i class="fa fa-calendar"></i></button>
                        </span>
                      </div>
                    </div>
                  </div>
                  <button class="btn green cx">查询 <i class="fa fa-search"></i></button>
                  
              </div>
             
            <div class="imgDiv">
              <div id="container" style="width: 100%;"></div>
            </div>
              
            </div>
          </div>
          <!-- END EXAMPLE TABLE PORTLET-->
        </div>
      </div>

      <!-- 确定删除弹框开始 -->
      <div id="delete" class="modal fade" tabindex="-1" >
        <div class="modal-body">
          <p>
             确定删除?
          </p>
        </div>
        <div class="modal-footer">
          <button type="button" data-dismiss="modal" class="btn btn-default">取消</button>
          <button type="button" data-dismiss="modal" @click="sureDelete" class="btn blue">确定</button>
        </div>
      </div>
      <!-- 确定删除弹框结束 -->

      <!-- 编辑信息开始 -->
      <div id="responsive" class="modal fade" tabindex="-1" data-width="760">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
          <h4 class="modal-title">编辑信息</h4>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-offset-3 col-md-6">

              <p>
                <span></span>
                <input class="form-control" placeholder="请输入序号" :value="this.modifyNum.number" type="text">
              </p>
              <p>
                <input class="form-control" placeholder="请输入员工邮箱" :value="this.modifyNum.bh" type="text">
              </p>
              <p>
                <input class="form-control" placeholder="请输入员工次数" :value="this.modifyNum.address" type="text">
              </p>
               <p>
                <input class="form-control" placeholder="请输入员工邮箱" :value="this.modifyNum.xq" type="text">
              </p>
              <p>
                <input class="form-control" placeholder="请输入员工次数" :value="this.modifyNum.sbNum" type="text">
              </p>
              <div class="form-group">
                    <label class="col-md-4 control-label"><font><font style="color: #333;font-weight: 500;">设备房状态</font></font></label>
                    <div class="col-md-8" style="position: relative;top: -10px;">
                      <div class="radio-list">
                        <label class="radio-inline">
                            <div class="radio" id="uniform-optionsRadios25">
                              <span >  <!-- :class="{'active':$index==0}" -->
                                <input type="radio" name="optionsRadios" id="optionsRadios25" value="option1" :checked="this.modifyNum.type==1">
                              </span>
                            </div>
                          <font><font  style="color: #333;font-weight: 500;"> 启用 </font></font>
                        </label>
                        <label class="radio-inline">
                          <div class="radio" id="uniform-optionsRadios26">
                            <span :class="{'checked':this.modifyNum.type==0}">
                              <input type="radio" name="optionsRadios" id="optionsRadios26" value="option2" :checked="this.modifyNum.type==0">
                            </span>
                          </div>
                          <font><font  style="color: #333;font-weight: 500;"> 禁用 </font></font>
                        </label>
                      
                      </div>
                    </div>
              </div>

            </div>

          </div>
        </div>
        <div class="modal-footer">
          <button type="button" data-dismiss="modal" class="btn btn-default">关闭</button>
          <button type="button" class="btn blue" @click="saveData">保存</button>
        </div>
      </div>              
      <!-- 编辑信息结束 -->
      
      <!-- 监控信息开始 -->
      <div id="jkInfor" class="modal fade" tabindex="-1" >
       <div class="modal-title">
          <p>
             监控信息
          </p>
        </div>
        <div class="modal-body">
          监控信息
        </div>       
      </div>
      <!-- 监控信息结束 -->

      <!-- 设备台账记录开始 -->
      <div id="sbRecord" class="modal fade" tabindex="-1" >
       <div class="modal-title">
          <p>
             设备台账记录
          </p>
        </div>
        <div class="modal-body">
          设备台账记录
        </div>       
      </div>
      <!-- 设备台账记录结束 -->

  </div>

</template>  

<style scoped>
    .cz{float: right;width: auto;position: relative;top: 3px;left: 5px;}
    .mb10{margin-bottom: 10px;}
    p {margin: 0 0 10px;}
    table tr td,table tr th{text-align: center;vertical-align: middle;}
    .search{margin: 0 0 10px;}
    .search .form-control{width: 250px;display: inline-block;}
    .search button{position: relative;top: -2px;color: #fff;}
    .imgDiv img{width: 100%;}
    .undefinedbootstrap_full_number{text-align: center;;}
    .pagination{display: inline-block;}
    .dataTotal{color: #666;font-weight: 500;position: relative;top: -20px;left: 10px;}
    .pagination li a,.pagination li a .fa{color: #666;font-weight: 500;}
    .pagination li.active a,.numData{color: #26a69a;font-weight: 500;}
    .numData{font-size: 16px;}
    .c333{color: #333;font-weight: 500;}
    .color{color: #00CC66;font-weight: 500;}

    .modal-title{color: #333;font-weight: 500;}
    #sample_editable_1_new{margin-right: 10px;}
    #sbRecord {
      width: 50%;
      margin-left: -25%;
      max-height: 400px;
      margin-top: -200px;
      overflow-y: auto;
    }
    .btn.dropdown-toggle{color: #333;}
    @media (max-width: 768px){
      .cz{float:left;margin-bottom: 0px;}
      .dataTotal{top: -5px;}
      .portlet-body select{margin-bottom: 10px;}
      .cx{float: right;position: relative;right: 15px;top: 10px;}
      .table-striped{margin-top: 20px;}
    }
</style>

<script>


  import '../../../../static/global/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js';



  import Metronic from '../../../../static/global/js/metronic.js'
  import {check,Tips} from '../../../../static/js/pages/tips.js'

  import ComponentsPickers from '../../../../static/js/pages/components-pickers.js';

  import Headers from '../../../components/Headers.vue';
  import Bars from '../../../components/Bars.vue';
  import Foot from '../../../components/Foot.vue';
   
  import optVue from '../../../config/optVue.js';
  import {setStore,getStore,removeStore} from '../../../config/common.js';


  export default {
     data(){
      return{
        list:[],
        glcs:4,
        glList:[],
        data:null,
        dataId:null,  
        sbTitle:{},
        modifyNum:{},
        infor:{},
        index:null,
        title:"",
        glNum:2,
        glNumChild:0
      }
    },
    components: {
        Headers,Bars,Foot
    },
    mounted(){
      this.infor = JSON.parse(window.localStorage.getItem('infor'));
      this.infor.dev_para_name = "水泵房"
      document.title = ''+this.infor.dev_para_name+'详情';
      this.title = document.title

      optVue.sbwbjgInfor(this,parseInt(this.infor.dev_room_id));
      
      $(function(){
        /*全选反选*/
        check.init($(".table-checkbox"),$(".checkboxes"));
        ComponentsPickers.init();
    
        var highcharts = require('highcharts')
      
        $('#container').highcharts({
            chart: {
                type: 'areaspline',
            },
            title: {
                text: '数据记录'
            },
            xAxis: {
                categories: ['20:20', '20:25', '20:30', '20:35', '20:40', '20:45', '20:50'],
                tickmarkPlacement: 'on',
                title: {
                    enabled: false
                }
            },
            yAxis: {
                title: {
                    text: '值'
                },
                labels: {
                    formatter: function () {
                        return this.value;
                    }
                }
            },
            credits:{
              enabled: false  //去掉版权信息
            },
            tooltip: {
                split: true,
                valueSuffix: '%'
            },
            plotOptions: {
                area: {
                    stacking: 'normal',
                    lineColor: '#666666',
                    lineWidth: 1,
                    marker: {
                        lineWidth: 1,
                        lineColor: '#666666'
                    }
                }
            },
            series: [{
                name: '数据',
                data: [2, 4, 12, 3, 23, 12, 13]
            }]
        });
      
      })
    },
    methods:{
      deleteData:function (index,data,event) {
        this.data = data;
        this.index = index;
      },
    
      sureDelete:function(event){
     
        this.list.splice(this.index, 1);

        /*提示信息*/
        Tips.init({
          type:"success",
          message:"删除成功",
          class:"on"
        });
       //optVue.sbfgl(this);
      },
      
    
      allDelete:function(event){
        console.log($(".checkboxes").is(':checked'))
        if($(".checkboxes").is(':checked')){
          
        }
      },
      
      saveData:function(){
        console.log(this.modifyNum);
      },
    }

  }

</script>  



